﻿@* ReSharper disable UnknownCssClass *@

@model OpusSuite.Models.Model.Ref.Country

<script src="@Url.Content("~/Scripts/Shared/ProgressSpinner.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/Select/LanguageSelect.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/Select/DateFormatSelect.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/Select/MoneyFormatSelect.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/grid.locale-en.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.jqGrid.min.js")" type="text/javascript"></script>

<div id="applicationMessages">@Html.Partial("ApplicationMessages", (IEnumerable<OpusSuite.Models.Model.Shared.ApplicationMessage>)ViewBag.ApplicationMessages)</div>        

@using (Html.BeginForm("CountrySelect", "Ref", FormMethod.Post, new { id = "countryForm" }))
{
    <h2>Select / Add a country</h2>
    <fieldset>
        <legend>Details</legend>

        <table class="table-editor">
        <tr>
            <td class="td-horiz-label">@Html.LabelFor(model => model.Code, new { @class = "label-horiz" })</td>
            <td class="td-horiz-field">@Html.TextBoxFor(model => model.Code, new { @class = "editor-horiz", @disabled = "disabled", @id="Dialog_Country_Code" })</td>
        </tr>        
        <tr>
            <td class="td-horiz-label">@Html.LabelFor(model => model.Language.Name, new { @class = "label-horiz" })</td>
            <td class="td-horiz-field"><a href="#" id="Dialog_Country_Language_Name">@(Model.Language.Name)</a></td>
        </tr>
        <tr>
            <td class="td-horiz-label">@Html.LabelFor(model => model.MoneyFormat.Name, new { @class = "label-horiz" })</td>
            <td class="td-horiz-field"><a href="#" id="Dialog_Country_MoneyFormat_Name">@(Model.MoneyFormat.Name)</a></td>
        </tr>
        <tr>
            <td class="td-horiz-label">@Html.LabelFor(model => model.DateFormat.Name, new { @class = "label-horiz" })</td>
            <td class="td-horiz-field"><a href="#" id="Dialog_Country_DateFormat_Name">@(Model.DateFormat.Name)</a></td>
        </tr>
        <tr>
        <td colspan="3" style="text-align: right">
                <a id="Dialog_Country_Filter" class="uiButton">Filter</a>
                <a id="Dialog_Country_Edit" class="uiButton">Edit</a>
                <a id="Dialog_Country_Clear" class="uiButton">Clear</a>
                <a id="Dialog_Country_Add" class="uiButton">Add</a>
                <a id="Dialog_Country_Delete" class="uiButton">Delete</a>
        </td>
        </tr>
        </table>
    </fieldset>

    <table id="list"></table>
    <div id="pager"></div>

    <div id="dialogLanguage" title="" style="overflow: hidden;"></div>
    <div id="dialogDateFormat" title="" style="overflow: hidden;"></div>
    <div id="dialogMoneyFormat" title="" style="overflow: hidden;"></div>
}

@* ReSharper restore UnknownCssClass *@
@* ReSharper disable UnusedParameter *@
<script type="text/javascript">
    jQuery(document).ready(function () {
        $(".uiButton").button();

        jQuery("#list").jqGrid({
            url: '@Url.Action("CountrySelectData", "Ref")',
            datatype: 'json',
            mtype: 'GET',
            colNames: [' ', 'Code', 'Description', 'Language', 'Money Format', 'Date Format', '', '', ''],
            colModel: [
          { name: 'myac', width: 80, fixed: true, sortable: false, resize: false, formatter: 'actions', formatoptions: { keys: true} },
          { name: 'Code', index: 'Code', width: 100, align: 'left' },
          { name: 'Description', index: 'Description', width: 300, align: 'left' },
          { name: 'Language', index: 'Language', width: 150, align: 'left' },
          { name: 'MoneyFormat', index: 'MoneyFormat', width: 150, align: 'left', sortable: false },
          { name: 'DateFormat', index: 'DateFormat', width: 150, align: 'left', sortable: false },
          { name: 'LanguageCode', index: 'LanguageCode', hidden: true, width: 150, align: 'left' },
          { name: 'MoneyFormatCode', index: 'MoneyFormatCode', hidden: true, width: 150, align: 'left' },
          { name: 'DateFormatCode', index: 'DateFormatCode', hidden: true, width: 150, align: 'left'}],
            pager: jQuery('#pager'),
            rowNum: 5,
            rowList: [5, 10, 20, 50],
            sortname: 'Description',
            sortorder: "asc",
            viewrecords: true,
            caption: 'Countries',
            onSelectRow: function (rowid, status) {
                $("#Dialog_Country_Code").val($(this).getCell(rowid, 'Code'));
                $("#Dialog_Country_Description").val($(this).getCell(rowid, 'Description'));

                $("#Dialog_Country_Language_Name span.ui-button-text").text($(this).getCell(rowid, 'Language'));
                $("#Dialog_Country_Language_Code").val($(this).getCell(rowid, 'LanguageCode'));

                $("#Dialog_Country_MoneyFormat_Name span.ui-button-text").text($(this).getCell(rowid, 'MoneyFormat'));
                $("#Dialog_Country_MoneyFormat_Code").val($(this).getCell(rowid, 'MoneyFormatCode'));

                $("#Dialog_Country_DateFormat_Name span.ui-button-text").text($(this).getCell(rowid, 'DateFormat'));
                $("#Dialog_Country_DateFormat_Code").val($(this).getCell(rowid, 'DateFormatCode'));
            }
        });

        $("#Dialog_Country_Clear").click(function () {
            $("#Dialog_Country_Code").val('');
            $("#Dialog_Country_Description").val('');
            $("#Dialog_Country_Language_Name").text('');
            $("#Dialog_Country_Language_Code").val('');
            $("#Dialog_Country_MoneyFormat_Name").text('');
            $("#Dialog_Country_MoneyFormat_Code").val('');
            $("#Dialog_Country_DateFormat_Name").text('');
            $("#Dialog_Country_DateFormat_Code").val('');
        });

    }); 
</script>
@* ReSharper restore UnusedParameter *@